<body>
<style type="text/css">
.hs-iframe{width:100%;height:100%;}
.layui-tab-content{padding:10px 10px 10px 10px;height:100%;}
.layui-tab-item{height:100%;}
.layui-tab-title .layui-icon-refresh {
	position: relative;
	display: inline-block;
	width: 18px;
	height: 18px;
	line-height: 20px;
	margin-right: 8px;
	top: 1px;
	text-align: center;
	font-size: 14px;
	color: #c2c2c2;
	transition: all .2s;
	-webkit-transition: all .2s;
}
.layui-tab-title .layui-icon-refresh:hover {
    border-radius: 2px;
    background-color: #FF5722;
    color: #fff;
}

</style>
<script>
layui.extend({
	wytree: 'layui.wytree'
})
var nodes_data = {:json_encode($menu_lists)};
layui.use(['jquery', 'wytree','element'], function(){

	layui.jquery('.layui-tab-nav').height(layui.jquery(window).height() - 25);
	layui.jquery('.layui-tab-content').height(layui.jquery(window).height() - 85);

	layui.wytree({
		elem: '#nav_layui_tree'
		,nodes:  nodes_data
		,click: function(node){
			console.log(node);
			if(!node.wy_href){
				return false;
			}

			if (layui.jquery('iframe[src="'+node.wy_href+'"]')[0]) {
				layui.element.tabChange('WyContentTab', node.id);
				event.stopPropagation();
				return false;
			}
			layui.element.tabAdd('WyContentTab', {
				title: '<i class="layui-icon layui-icon-refresh" lay-id="'+node.id+'"></i> '+node.name,
				content: '<iframe width="100%" height="100%" id="tree_id_'+node.id+'" lay-id="'+node.id+'" lay-filter="'+node.id+'" frameborder="0" src="'+node.wy_href+'" scrolling="yes" class="x-iframe"></iframe>',
				id: node.id
			});
			layui.element.tabChange('WyContentTab', node.id);

		}
	});

	layui.jquery("#nav_layui_tree").height(layui.jquery(".layui-tab-nav").height()-50);

	$(document).on("click","#switchBody .layui-icon-refresh",function(){
		var _this = $(this);
		var _id = _this.attr("lay-id");
		var _this_ifram = $("#switchBody .layui-tab-content .layui-tab-item iframe#tree_id_"+_id);
		_this_ifram.attr("src",_this_ifram.attr("src"));
	});

});

</script>
<div class="layui-fluid" style="height: 100%;">
	<div class="layui-row" id="switchBody">
		<div class="layui-col-sm3 layui-col-md2 layui-col-lg2">
			<div style="width: 98%;" class="layui-tab layui-tab-card layui-tab-nav">
				<div style="background-color: #f2f2f2;height: 40px;line-height: 40px;border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #e6e6e6;padding-left: 10px;">
					目录
				</div>
			  <ul id="nav_layui_tree" style="overflow: auto;"></ul>
			</div>
		</div>
		<div class="layui-col-sm9 layui-col-md10 layui-col-lg10">
		 <div class="layui-tab layui-tab-card" lay-filter="WyContentTab" lay-allowClose="true" style="">
			<ul class="layui-tab-title">

			</ul>
			<div class="layui-tab-content" style="">

			</div>
		</div>
		</div>
	</div>
</div>
</body>